<template>
  <div class="contractState">
    <img
      src="./img/jiekuanhetong_bg.png"
      alt=""
      class="contractTypeBg"
    />
    <div class="contractType">借款合同</div>
    <div class="itemState">未签署</div>
    <div class="sendTime">推送时间：<span>2024.01.01 12:02:25</span></div>
    <div class="userInfo">
      <img
        src="./img/icon_recomment.png"
        alt=""
        class="advantar"
      />
      <div class="userName">包子</div>
      <div class="loanNum">2000000元</div>
      <div class="loanRate">3.85%</div>
    </div>
    <div class="userPhone">
      <img
        src="./img/phone.png"
        alt=""
        class="phoneIcon"
      />
      <div class="phoneNum">手机号：<span>18841322133</span></div>
      <img
        src="./img/phone.png"
        alt=""
        class="phoneIcon"
      />
    </div>
    <img
      src="./img/reSendMsg.png"
      alt=""
      class="reSendMsg"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import * as http from "../../utils/http";
import { useAppStore } from "../../store/index";
const store = useAppStore();
const constractList = reactive([]);
onMounted(() => {
  http
    .contractList({
      orderId: store.orderId,
    })
    .then((res) => {});
});
</script>

<style scoped lang="scss">
.contractState {
  margin: 30rpx 35rpx;
  padding: 73rpx 30rpx 20rpx 25rpx;
  height: 173rpx;
  background-color: #fff;
  border-radius: 16rpx;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  .contractType {
    width: 126rpx;
    height: 38rpx;
    line-height: 38rpx;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    color: #fff;
    font-size: 24rpx;
    z-index: 99;
  }
  .contractTypeBg {
    position: absolute;
    width: 126rpx;
    height: 38rpx;
    left: 0;
    top: 0;
    z-index: 9;
  }
  .itemState {
    width: 112rpx;
    height: 44rpx;
    line-height: 44rpx;
    text-align: center;
    border-radius: 8rpx;
    border: 1rpx dashed #297cfb;
    color: #297cfb;
    font-size: 20rpx;
    background-color: #dbeeff;
    position: absolute;
    top: 30rpx;
    right: 30rpx;
  }
  .sendTime {
    color: #999999;
    font-size: 24rpx;
  }
  .userInfo {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .advantar {
      width: 52rpx;
      height: 52rpx;
      margin-right: 15rpx;
    }
    .userName {
      color: #333333;
      font-size: 28rpx;
      margin-right: 20rpx;
    }
    .loanNum {
      padding: 2rpx 10rpx;
      height: 22rpx;
      line-height: 22rpx;
      font-size: 16rpx;
      text-align: center;
      color: #0dabff;
      background-color: #dff4ff;
      border-radius: 4rpx;
      margin-right: 15rpx;
    }
    .loanRate {
      padding: 2rpx 10rpx;
      height: 22rpx;
      line-height: 22rpx;
      font-size: 16rpx;
      text-align: center;
      color: #ff7513;
      background-color: #ffe7d6;
      border-radius: 4rpx;
    }
  }
  .userPhone {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .phoneIcon {
      width: 25rpx;
      height: 25rpx;
      margin-right: 20rpx;
    }
    .phoneNum {
      color: rgba($color: #000000, $alpha: 0.65);
      font-size: 24rpx;
      margin-right: 10rpx;
    }
  }
  .reSendMsg {
    width: 139rpx;
    height: 48rpx;
    position: absolute;
    right: 30rpx;
    bottom: 20rpx;
  }
}
</style>
